<template>
  <div :style="Background" class="Index">
    <!-- <stepmain/> -->
    <van-nav-bar title="设置" />
    <div class="mine-top">
      <van-image
        round
        width="5rem"
        height="5rem"
        src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
      <div class="mine-top-user">
        <span style="font-weight: 600; font-size: 1.4rem; color: black">{{
          userPhone
        }}</span>
        <span style="color: black">已有设备：{{ deviceNum }}</span>
      </div>
    </div>
    <div class="mine-mid">
      <!-- <van-uploader :after-read="afterRead"> -->
      <van-cell
        class="mine-mid-cell"
        title="更换背景"
        size="large"
        is-link
        @click="changebg"
      />
      <!-- </van-uploader> -->
      <van-cell
        class="mine-mid-cell"
        title="检查更新"
        size="large"
        @click="update"
      />
    </div>

    <div class="mine-bottom">
      <van-button round block type="info" @click="exit">退出登录</van-button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  name: "App",
  components: {},
  data() {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: "选项一" }, { text: "选项二" }, { text: "选项三" }],
      Background: "",
      fileList: "",
      userPhone: localStorage.getItem("setPhone"),
      deviceNum: localStorage.getItem("deviceNum"),
    };
  },
  // created: function () {
  //   //this.updateDevice()
  //   // this.mqttMsg()
  // },
  methods: {
    afterRead(file) {
      //localStorage.setItem("Background",file.content)
      this.resetSetItem("Background", file.content);
      // this.Background = {
      //   "background-image": "url(" + file.content + ")",
      // };
      console.log(this.Background);

      // 此时可以自行将文件上传至服务器
      //console.log(file);
    },
    changebg() {
      this.$router.push({
        name: "changebg",
        params: {
          routerType: "push",
        },
      });
    },
    update() {
      Toast.loading({
        duration: 0,
        message: "检查中...",
        forbidClick: true,
      });
      this.$http
        .get("http://121.5.58.100:8000/queryOTA", {
          params: {
            userAgent: navigator.userAgent,
            version: this.$version,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((result) => {
          Toast.clear();
          if (result.data.version > this.$version) {
            Dialog.confirm({
              title: "发现新版本 V" + result.data.version,
              confirmButtonText: "更新",
              message: result.data.content,
            })
              .then(() => {
                // on confirm
                window.location.href =
                  "http://121.5.58.100:22/base-" + result.data.version + ".apk";
              })
              .catch(() => {
                // on cancel
              });
          } else {
            Dialog.alert({
              message: "当前为最新版本",
            });
          }
        });
    },

    exit() {
      localStorage.setItem("islogin", 0);
      this.$router.go(0);
      console.log("ok");
    },
  },
};
</script>

<style lang="scss" scoped>
.Index {
  background-color: transparent;
  height: 100%;
  overflow: hidden;
}
.mine-top {
  display: flex;
  padding: 20px;
  align-items: center;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  margin: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  &-user {
    margin: auto;
    text-align: center;
    line-height: 35px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
.mine-mid {
  margin: 20px;
  border-radius: 20px;
  z-index: 5;
  &-cell {
    margin: 0 0 10px 0;
    width: auto;
    border-radius: 10px;

    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
.mine-bottom {
  margin: 20px;
  position: fixed;
  bottom: 50px;
  width: calc(100% - 40px);
}
.text {
  color: white;
  text-align: left;
  margin-left: 5vw;
  margin-bottom: 10vw;
}
</style>
